在前一章我們順利的做出了第一個長條圖，但好像還缺點什麼呢？就是座標軸！沒有座標軸，光有一條一條的長方形哪裏知道代表的是多少？

於是這邊要應用到上一章所講的Scale來製作座標軸，D3同樣提供好用的function來讓我們能快速畫出來喔～

D3提供了四種不同的function給我們使用：

• axisTop()
• axisBottom()
• axisLeft()
• axisRight()

顧名思義就是分別在上下左右的座標軸，可以依據不同情況選擇使用。而在我們剛做出來的圖中，我們要加上的是左邊和上面的座標軸。

<svg width="600" height="400" style="border: 1px solid black"></svg>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
  const data = [
    { value: 874, name: '1' },
    { value: 291, name: '2' },
    { value: 30, name: '3' },
    { value: 500, name: '4' },
    { value: 1000, name: '5' }
  ];

  const svg = d3
    .select('svg')
    .append('g')
    .attr('transform', 'scale(0.9)') //讓整個圖表向中間縮小，座標軸才不會被擋住
    .attr('transform-origin', 'center');

  const x = d3
    .scaleBand()
    .domain(data.map((e) => e.name))
    .range([0, 600])
    .paddingInner(0.3)
    .paddingOuter(0.3);

  const y = d3
    .scaleLinear()
    .domain([
      0,
      d3.max(data.map((e) => e.value))
    ])
    .range([0, 400]);

  //首先先定義好拿來產生座標軸的兩個function
  const xAxisCall = d3.axisTop(x);
  const yAxisCall = d3.axisLeft(y);
  
  //呼叫剛剛定義的function
  const xAxis = svg
    .append('g')
    .attr('class', 'x axis')
    .call(xAxisCall);
  const yAxis = svg
    .append('g')
    .attr('class', 'y axis')
    .call(yAxisCall);

  const rects = svg
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => {
      return x(d.name);
    })
    .attr('width', x.bandwidth)
    .attr('height', (d, i) => {
      return y(d.value);
    })
    .attr('fill', 'black');
</script>